<template>
  <div class="app-container">
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">基本信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="6" class="table-cell-title">手机号</el-col>
        <el-col :span="6" class="table-cell-title">状态</el-col>
        <el-col :span="12" class="table-cell-title">提交时间</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">{{ list.phone }}</el-col>
        <el-col :span="6" class="table-cell">{{ status[list.status] }}</el-col>
        <el-col :span="12" class="table-cell">{{ list.createTime | formatDateTime }}</el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">提交信息</span>
    </div>
    <div class="table-layout">
      <el-row>
        <el-col :span="6" class="table-cell-title">内容项</el-col>
        <el-col :span="6" class="table-cell-title">原来的值</el-col>
        <el-col :span="12" class="table-cell-title">提交的值</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">姓名</el-col>
        <el-col :span="6" class="table-cell">{{ oldList.name }}</el-col>
        <el-col :span="12" class="table-cell">{{ list.name }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">身份证</el-col>
        <el-col :span="6" class="table-cell">{{ oldList.idCard }}</el-col>
        <el-col :span="12" class="table-cell">{{ list.idCard }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">城市信息</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{oldList | setAdrInfo}} </el-col>
        <el-col
          :span="12"
          class="table-cell"
        >{{list | setAdrInfo}} </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" class="table-cell">所属社区</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{oldList.communityName}}</el-col>
        <el-col
          :span="12"
          class="table-cell"
        >{{list.communityName}}</el-col>
      </el-row>
      <el-row>
        <el-col
          :span="6"
          class="table-cell"
        >楼号信息</el-col>
        <el-col
          :span="6"
          class="table-cell"
        >{{oldList.floor}}</el-col>
        <el-col
          :span="12"
          class="table-cell"
        >{{list.floor}}</el-col>
      </el-row>
    </div>
    <div style="margin-top: 20px">
      <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
      <span class="font-small">审核信息</span>
    </div>
    <div style="margin-top: 20px">
      <el-radio v-model="radio" label="1">通过</el-radio>
      <el-radio v-model="radio" label="2">不通过</el-radio>
    </div>
    <el-form style="margin-top: 20px" v-if="this.radio=='2'">
      <el-form-item label="不通过原因" required>
        <el-input
          type="textarea"
          v-model="list.reason"
          placeholder="请输入内容"
          @change="input"
        >
        </el-input>
      </el-form-item></el-form>
    <el-row type="flex" justify="end" style="margin-top: 20px">
      <el-col :span="6">
        <el-button @click="back">取消</el-button>
        <el-button @click="handleConfirm" type="primary">确定</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>

// import { siteDeptById } from '@/api/servDept'
import { auditById, updateAudit, getMenberById } from '@/api/memberLevel'
import { formatDate } from '@/utils/date'
export default {
  name: 'CourseList',
  data () {
    return {
      radio: '1',
      list: {},
      oldList: {},
      course: {},
      total: null,
      listLoading: false,
      status: {
        '01': '待审核',
        '02': '审核通过',
        '03': '审核不通过'
      },
      status_val: ''
    }
  },
  created () {
    auditById({ id: this.$route.query.id }).then(response => {
      // console.log( this.$route.query.id)
      this.list = response.data
    })
    getMenberById({ id: this.$route.query.userId }).then((response) => {
      // console.log( this.$route.query.id)
      this.oldList = response.data;
    });
  },
  filters: {
    formatCouerseType (typeList) {
      let type = ''
      typeList && typeList.map((item, index) => {
        type = type + item.name + (typeList.length === (index + 1) ? '' : '/')
      })
      return type
    },
    formatDateTime (time) {
      if (time == null || time === '') {
        return 'N/A'
      }
      const date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    setAdrInfo (row) {
      // console.log(row);
      const { province, city, area } = row
      if (province && city && province.indexOf('{') !== -1) {
        return `${JSON.parse(province).provName}-${JSON.parse(city).cityName}-${JSON.parse(area).countyName}`
      } else {
        return ''
      }
    }
  },
  methods: {
    input (value) {
      this.list.reason = value
    },
    back () {
      this.$router.go(-1)
    },
    handleConfirm () {
      console.log(this.$route.query.id, this.radio)
      if (this.radio == '1') {
        this.status_val = '02'
      } else if (this.radio == '2') {
        this.status_val = '03'
      }
      const data = {
        'status': this.status_val,
        'id': this.$route.query.id,
        'reason': this.list.reason,
        operationId: this.list.operationId,
        operationName: this.list.operationName
      }
      updateAudit(data).then(response => {
        this.$message({
          message: '审核成功！',
          type: 'success'
        })
        this.$router.go(-1)
      })
    }
  }
}
</script>
<style scoped>
  .app-container {
    width: 80%;
    margin: 20px auto;
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 40px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    overflow: hidden;
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }

  .coursePic {
    margin-top: 20px;
    max-width: 100%;
  }
</style>
